import { Component, createRef } from "react";
import { init, type EChartsType } from "echarts";

interface IProps {
  data: { label: string; value: number }[];
}

export default class Chart02 extends Component<IProps> {
  boxRef = createRef<HTMLDivElement>();
  ins: EChartsType | null = null;

  render() {
    return (
      <div ref={this.boxRef} style={{ width: "100%", height: "100%" }}></div>
    );
  }

  componentDidMount() {
    this.initChart();
  }

  componentDidUpdate(prevProps: Readonly<IProps>): void {
    // 控制只有 data 数据发现变化，才处理
    if (this.props.data === prevProps.data) {
      return;
    }

    const { data } = this.props;
    // 重新调用 this.ins.setOption
    this.ins?.setOption({
      yAxis: [
        {
          data: data.map((item) => item.label),
        },
        {
          data: data.map((item) => item.value),
        },
      ],
      series: [
        {
          data: data.map((item) => item.value),
        },
      ],
    });
  }

  // 初始化
  initChart = () => {
    this.ins = init(this.boxRef.current);
    // 设置默认的配置
    this.ins.setOption({
      grid: {
        containLabel: true,
        // left: 100,
        // right: 100,
      },
      xAxis: {
        type: "value",
        axisLabel: { show: false },
        splitLine: { show: false },
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            formatter: function (value: any, index: number) {
              const num = index + 1;
              if (num === 1) {
                return "{one|" + num + "}" + " " + value;
              } else if (num === 2) {
                return "{two|" + num + "}" + " " + value;
              } else if (num === 3) {
                return "{three|" + num + "}" + " " + value;
              }
              return "{index|" + num + "}" + " " + value;
            },
            rich: {
              one: {
                width: 24,
                height: 24,
                verticalAlign: "middle",
                align: "center",
                borderRadius: 24,
                backgroundColor: "pink",
                color: "red",
              },
              two: {
                width: 24,
                height: 24,
                verticalAlign: "middle",
                align: "center",
                borderRadius: 24,
                backgroundColor: "green",
                color: "red",
              },
              three: {
                width: 24,
                height: 24,
                verticalAlign: "middle",
                align: "center",
                borderRadius: 24,
                backgroundColor: "blue",
                color: "red",
              },
              index: {
                width: 24,
                height: 24,
                verticalAlign: "middle",
                align: "center",
                borderRadius: 24,
              },
            },
          },
          data: [],
        },
        {
          type: "category",
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            formatter: "转换率: {value}.00%",
          },
          data: [],
        },
      ],
      series: [
        {
          data: [],
          colorBy: "data",
          // 图形样式
          itemStyle: {
            borderRadius: 5,
          },
          type: "bar",
        },
      ],
    });
  };
}
